<script setup>
import { queryUSerInfoApi, edituserInfoApi } from '@/api/UserinfoView'
import { message } from 'ant-design-vue'
import { ref } from 'vue'

const editMode = ref(false)
const userData = ref({
  username: '',
  schoolID: '',
  phone_number: '',
  specialized_class: '',
  qqsmtp: '',
  current_progress: '',
  user_clusters: '',
  grade_one: '',
  grade_two: '',
  grade_three: '',
})


const obj = {

  start: "通过",
  remok: "99"
}

console.log(JSON.stringify(obj));


const userstart = (start) => {
  if (!start) return "暂无 信息"
  const startobj = {
    0: "未报名",
    1: "已报名",
    2: "一面",
    3: "二面",
    4: "三面",
    5: "通过",
    6: "未通过"
  }
  return startobj[start]
}

const toggleEditMode = () => {
  editMode.value = !editMode.value
}
// 在组件加载时获取用户信息
queryUSerInfoApi()
  .then((res) => {
    console.log(res)
    if (res.status === 0) {
      console.log(res.data);

      userData.value = res.data
      editMode.value = false
    } else {
      console.log('用户信息获取失败！')
    }
  })
  .catch((err) => {
    console.log(err)
  })

const editModeUserinfo = () => {
  edituserInfoApi(userData.value)
    .then((res) => {
      console.log(res)
      //修改成功过后  重新请求用户信息
      queryUSerInfoApi()
      toggleEditMode()
      message.success('信息修改成功！')
    })
    .catch((err) => {
      console.log(err)
    })
}
</script>

<template>
  <div class="userinfo">
    <div class="card cart">
      <label class="title">用户信息</label>
      <div class="steps">
        <div class="step">
          <div>
            <p>
              <span>用户名：</span>
              <input class="input_field" v-if="editMode" type="text" v-model="userData.username" />
              <span class="text-content" v-else>{{ userData.username }}</span>
            </p>
            <p>
              <span>手机号：</span>
              <input class="input_field" v-if="editMode" type="text" v-model="userData.phone_number" />
              <span class="text-content" v-else>{{ userData.phone_number }}</span>
            </p>
            <p>
              <span>QQ号：</span>
              <input class="input_field" v-if="editMode" type="text" v-model="userData.qqsmtp" />
              <span class="text-content" v-else>{{ userData.qqsmtp }}</span>
            </p>
            <p>
              <span>专业班级：</span>
              <span class="text-content">{{ userData.specialized_class }}</span>
            </p>
            <p>
              <span>学号：</span>
              <span class="text-content">{{ userData.schoolID }}</span>
            </p>
            <p>
              <span>选择方向：</span>
              <span class="text-content">{{ userData.user_clusters }}</span>
            </p>
            <span> 面试状态: <span id="inter_status">{{ userstart(userData.current_progress) }}</span></span>
            <div class="info_display" v-if="userData.current_progress > 0 && userData.current_progress">
              <div class="inter_results">
                <span class="teitle_text">一面</span>
                <div class="text-content">
                  <span>{{ userstart(userData.grade_one) }} </span>
                </div>
              </div>

              <div class="inter_results">
                <span class="teitle_text">二面</span>
                <div class="text-content">
                  <span>{{ userstart(userData.grade_two) }}</span>
                </div>
              </div>
              <div class="inter_results">
                <span class="teitle_text">三面</span>
                <div class="text-content">
                  <span>{{ userstart(userData.grade_three) }}</span>
                </div>
              </div>


            </div>
          </div>
          <hr />
          <div class="promo">
            <span>个人信息有误？</span>
            <button @click="toggleEditMode">{{ editMode ? '取消' : '修改' }}</button>
            <button v-if="editMode" @click="editModeUserinfo">
              提交
            </button>
          </div>
          <hr />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.userinfo {
  width: 100%;
  height: 100vh;
  /* display: grid; */
  /* grid-template-columns: auto; */
  /* gap: 0px; */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #165047;
}

hr {
  height: 1px;
  background-color: rgba(16, 86, 82, 0.75);
  border: none;
}

.card {
  width: 80%;
  /* height: 50vh; */
  /* margin-top: -10%; */
  background: rgb(255, 250, 235);
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09),
    0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
}

.title {
  width: 100%;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 20px;
  border-bottom: 1px solid rgba(16, 86, 82, 0.75);
  font-weight: 700;
  font-size: 18px;
  color: #000000;
}

/* Cart */
.cart {
  border-radius: 19px;
}

.cart .steps {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.cart .steps .step {
  display: grid;
  gap: 10px;
}

.cart .steps .step span {
  font-size: 13px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 8px;
  display: block;
}

.cart .steps .step p {
  font-size: 11px;
  font-weight: 600;
  color: #000000;
}

.cart .steps .step .text-content {
  background: #4c7f78d1;
  color: #fff;
  font-size: 16px;
}

/* Promo */
.promo form {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 10px;
  padding: 0px;
}

.input_field {
  width: auto;
  height: 36px;
  padding: 0 0 0 12px;
  border-radius: 5px;
  outline: none;
  border: 1px solid rgb(16, 86, 82);
  background-color: rgb(251, 243, 228);
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.input_field:focus {
  border: 1px solid transparent;
  box-shadow: 0px 0px 0px 2px rgb(251, 243, 228);
  background-color: rgb(201, 193, 178);
}

.promo button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 18px;
  gap: 10px;
  width: 50%;
  height: 36px;
  background: rgba(16, 86, 82, 0.75);
  box-shadow: 0px 0.5px 0.5px #f3d2c9, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 5px;
  border: 0;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  color: #000000;
  margin: 10px;
}

#inter_status {
  position: relative;
  background: linear-gradient(to right, #668f77, #f3f708c0, #668f77);
  box-sizing: border-box;
  border: 0;
  outline: 0;
  padding: 1rem 3rem;
  font-size: 1em;
  transition: .25s ease;
  margin: 1em 10%;
  text-align: center;
  font-size: large;
  color: #275d36;
  text-shadow: 2px 2px 5px rgba(24, 54, 25, 0.683);
}

#inter_status::before {
  position: absolute;
  content: '';
  box-sizing: border-box;
  top: 0;
  left: 0;
  transform: translate(-5px, -5px);
  width: 100%;
  height: 100%;
  border: 1px solid rgb(84, 84, 84);
  transition: .25s ease;
}

#inter_status:hover {
  transform: translate(-5px, -5px);
}

#inter_status:hover::before {
  transform: translate(5px, 5px);
}

.steps .step .info_display {
  position: relative;
  border: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;

  .inter_results {
    letter-spacing: 2px;
    font-weight: bold;
    background: var(--color);
    border-radius: 2rem;
    color: white;
    padding: 1rem;
  }

  .teitle_text {
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(16, 86, 82, 0.75);

  }

  .text-content {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #f3f70887, #668f7782);

    span {
      color: #262205;
    }
  }

}

@media screen and (max-width: 400px) {
  .card {
    width: 50%;
  }
}

/* 当视口宽度小于 600px 时应用的样式 */
@media screen and (max-width: 600px) {
  .card {
    width: 70%;
  }
}

/* 当视口宽度大于等于 600px 且小于等于 1200px 时应用的样式 */
@media screen and (min-width: 601px) and (max-width: 1200px) {
  .card {
    width: 75%;
  }
}

/* 当视口宽度大于 1200px 时应用的样式 */
@media screen and (min-width: 1201px) {
  .card {
    width: 60%;
  }
}
</style>
